.f-grid,
.f-grid-group-cell {
    border: 1px solid @border-color;
}

.f-grid {
    background-color: @back-color;
}

.f-grid-resize-thumb,
.f-grid-group-line {
    background-color: @border-color
}

.f-grid-group-box,
.f-grid-column-head,
.f-grid-filter,
.f-grid-top,
.f-grid-bottom,
.f-grid-right,
.f-grid-top,
.f-grid-bottom,
.f-grid-group,
.f-grid-cell {
    border-style: solid;
    border-color: @border-color;
}

.f-grid-column-head .f-textbox,
.f-grid-cell,
.f-grid-group,
.f-grid-group-row {
    background-color: @back-color;
}

.f-grid-body .f-grid-checked {
    background-color: @checked-back-color;
}

.f-grid-group-box,
.f-grid-left .f-grid-cell,
.f-grid-right .f-grid-cell {
    background-color: @title-back-color;
}

.f-grid-body .f-grid-current,
.f-grid-body .f-grid-column-no {
    background-color: @current-back-color;
}

.f-grid-head .f-grid-cell,
.f-grid-head .f-grid-left,
.f-grid-head .f-grid-right,
.f-grid-head .f-grid-group,
.f-grid-column-head,
.f-grid-group-cell,
.f-grid-no {
    background-color: @default-color-4;
}

.f-grid-group-box .f-information {
    font-size: 14px;
    background-color: @title-back-color;
    color: @title-font-color;
}

.f-grid-head .f-grid-cell.f-textbox,
.f-grid-head .f-grid-cell.f-textbutton,
.f-grid-body .f-grid-cell-focus {
    background-color: @back-color;
}

.f-grid-group-box,
.f-grid-column-head,
.f-grid-filter,
.f-grid-left,
.f-grid-right,
.f-grid-group,
.f-grid-top,
.f-grid-cell {
    .f-border-box;
}

.f-grid-group-box,
.f-grid-column-head,
.f-grid-filter {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-width: 0 0 1px 0;
    padding: 0;
    outline: none;
    white-space: nowrap;
    cursor: default;
}

.f-grid-group-cell {
    position: static;
    margin-left: 8px;
    padding: 2px 20px;
}

.f-grid-group-box .f-information {
    margin-left: 8px;
    border: 0;
}

.f-grid-drag {
    position:absolute;
    z-index: 10;
}

.f-grid-drag-body {
    position: absolute;
    width: 9px;
    left: 50%;
    margin-left: -4px;
    top: 0;
    bottom: 0;
    border-top: 2px solid @drag-thumb-color;
    border-bottom: 2px solid @drag-thumb-color;
}

.f-grid-drag-body div {
    position: absolute;
    width: 3px;
    top: 0;
    bottom: 0;
    left: 3px;
    background-color: @drag-thumb-color;
}

.f-grid-scroll,
.f-grid-body {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
}

.f-grid-body {
    overflow: hidden;
    outline: none;
}

.f-grid-cell {
    position: absolute;
    overflow: hidden;
    border-width: 0 1px 1px 0;
    padding: 0 2px;
    outline: none;
    white-space: nowrap;
}

.f-grid-head .f-grid-cell {
    text-align: center;
}

.f-grid-resize {
    position: absolute;
    width: 5px;
    cursor: ew-resize;
    background-color: transparent;
    z-index: 2;
}

.f-grid-resize-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    cursor: ew-resize;
    z-index: 10;
}

.f-grid-sort {
    position: absolute;
    width: 16px;
    height: 16px;
    background: @flyingon-img -171px -43px;
}

.f-grid-sort-desc {
    background: @flyingon-img -192px -42px;
}

.f-grid-top,
.f-grid-middle,
.f-grid-bottom {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    overflow: hidden;
}

.f-grid-middle {
    top: 0;
    bottom: 0;
}

.f-grid-top {
    border-width: 0 0 2px 0;
    top: 0;
    z-index: 2;
}

.f-grid-bottom {
    border-width: 2px 0 0 0;
    bottom: 0;
    z-index: 2;
}

.f-grid-left,
.f-grid-center,
.f-grid-right,
.f-grid-group {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.f-grid-left {
    right: auto;
    z-index: 2;
}

.f-grid-right {
    border-width: 0 0 0 1px;
    left: auto;
    z-index: 2;
}

.f-grid-group {
    border-width: 0 1px 0 0;
    right: auto;
    z-index: 2;
    overflow: visible;
}

.f-grid-group-row {
    position: absolute;
    border: 0;
    width: auto;
    white-space: nowrap;
    text-align: right;
}

.f-grid-group-line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 10000px;
    height: 1px;
}

.f-grid-expand,
.f-grid-collapse {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.f-grid-expand {
    background: @flyingon-img -34px -95px;
}

.f-grid-collapse {
    background: @flyingon-img -13px -95px;
}

.f-grid-tree {
    position: absolute;
    z-index: 1;
    white-space: nowrap;
    text-align: right;
}

.f-grid-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.f-grid-icon-expand {
    background: @flyingon-img -115px -69px;
}

.f-grid-icon-collapse {
    background: @flyingon-img -90px -69px;
}

.f-grid-icon-file {
    margin-top: -1px;
    background: @flyingon-img -139px -68px;
}

.f-grid-column-no {
    text-align: center;
}